<?php
use yii\helpers\Url;
use yii\helpers\Html;
use yii\bootstrap\Modal;
use kartik\grid\GridView;
use johnitvn\ajaxcrud\CrudAsset; 
use johnitvn\ajaxcrud\BulkButtonWidget;
use yii\web\View;
use backend\assets\FontawesomeAsset;

FontawesomeAsset::register($this);
/* @var $this yii\web\View */
/* @var $searchModel backend\models\TaozhuangSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Taozhuangs');
$this->params['breadcrumbs'][] = $this->title;
$img_tag = isset($_GET['tag'])?$_GET['tag']:'img_id';
$previous = Url::previous();
$url = "index.php?r=image/upload-image&type_id=";
?>

<style type="text/css">
list-style:none;
</style>
<!-- image/index css js  -->
<script type="text/javascript">
<!--
var curPage = 1;
var total,pagesize,totalPage;
var img_type_click;
var img_tag
//获取当前页数据
function getData(page,search,tag){
	if(!tag){
		tag='type';
	}
	img_type_click = search;
	img_tag = tag;
	$.ajax({
		//type: "POST",
		url: 'index.php?r=image/show-image',
		data: {"page":page-1,"search":search,"tag":tag},
		dataType: 'json',
		beforeSend:function(){
			$("#list ul").append("<li id='loading'>loading...</li>");
			},
		success:function(json){
			//alert(json);
			$("#list ul").empty(); //清空数据区
			total = json.total; //总记录数
			pageSize = json.pageSize;//每页显示条数
			curPage = page;//当前页
			totalPage = json.totalPage;//总页数
			var li ="";
			if( json.list != "" )
			{
				var list = json.list;
				var have;
				$.each(list,function(index,array){
					
					li += "<li><a href='<?=$previous ?>"+"&<?=$img_tag ?>=" + array['id']+ "'><img src='" + array['url'] +"' height='" + array['height'] +"' width='" + array['width'] + "'>" + array['name']+"<br/>_"+array['height']+"X"+array['width']+"</a></li>";
					have = array['url'];
					});
					if(have.length != 0){
					$("#list ul").append(li);}
			}
			else{
				$("#list ul").append("<li>暂无图片</li>");
				}
			},
		
		complete:function(){
				getPageBar();
			},
		error:function(){
				alert("数据加载失败");
			},
		});
}

function getPageBar(){
	//页码大于最大页数，确认当前页
	if(curPage > totalPage) curPage=totalPage;
	//页码小于1，确认当前页
	if(curPage<1) curPage = 1;
	
	pageStr = "<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>";
	
	//如果是第一页
	if(curPage ==1){
		pageStr += "<span>首页</span><span>上一页</span>";
	}else{
		pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>"; 
	}
	
	//如果是最后页
	if(curPage>=totalPage){ 
    	pageStr += "<span>下一页</span><span>尾页</span></div>"; 
  	}else{ 
    	pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'> 下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a> </span>"; 
  } 
      
  $("#pagecount").html(pageStr); 

}

//打开页面，第一次加载
/* $(function(){ 
 
});  */

function show(id)
{
	$("#upload_img"+id).css("display","inline");
}
function hide(id)
{
	$("#upload_img"+id).css("display","none");
}

function upload_img(type_id)
{
	alert('ok');
}
function check_img(obj,id)
{
	 
	if(obj.checked)
	{	
		$("#upload_img"+id).css("display","inline");
	}
	else
	{
		$("#upload_img"+id).css("display","none");
	}
}

//-->
</script>
<style type="text/css">
     
	.taozhuang-index{
		position:absolute;
		left:0px;
		width:100%;
		height:100%;
	}
	.menu_with{
	    width:80px;
	}
	#div_menu{
		float:left;
    }
    .image_tree{
	   float:left;
    	margin-left:20px;
    }
</style>



   	
<script>

//模糊查询套装
 function search_tz(){
	 var tzname=$("#tzname").val();
	 if(tzname==""){
		 alert("请输入套装名称再查询！");
	 }else{
		 $.ajax({url:"index.php?r=taozhuang-new/search&tzname="+tzname ,
					 data:{},
					 success:function(data){
    					 var obj = JSON.parse(data); 
    					 var code=obj.code;
     					 if(code==1){
         					 //清空下拉框
          					$("#tzlist").html("&nbsp; &nbsp; 选择套装ID:<select style='width:150px;'>");
         					 //重新生成数据
     	 					 var count=obj.count;
    						for(var i=0;i<count;i++){
    							$("select").append("<option value='"+obj.tz[i].sid+"'>"+obj.tz[i].sid+": "+obj.tz[i].name+"</option>");
    					    }
   	 					    
     	 			     }else if(code==2){
      	 			    	$("#tzlist").html("&nbsp; &nbsp; 选择套装ID:<select style='width:150px;'> </select>");
         	 			 }
				  },	
				  error: function(){
					         alert("Error!");
			     }
		 });
	 }

}
// 显示菜单
 function show_menu(){
     $("#div_index").hide();
     $("#div_menu").show(); 
     $("#tree_left").show();
     $("#tree_right").show();
}
 //隐藏菜单
 function hide_menu(){
	 $("#div_menu").hide();
	 $("#tree_left").hide();
	 $("#tree_right").hide();
     $("#div_index").show();
 }

 //vr管理
 function show_vr(){
	  window.open('index.php?r=vr/tz-index' ,'width=800,height=600,toolbar=no, status=no, menubar=no, resizable=yes, scrollbars=yes');
 }
 //图片管理
 function show_image_tree(){
	  window.open('index.php?r=image/index' ,'width=800,height=600,toolbar=no, status=no, menubar=no, resizable=yes, scrollbars=yes');
	  //$("#div_image_tree").show();
}
 //秀家管理
 function show_index(){
    window.open('index.php?r=show/img-index','width=800,height=600,toolbar=no, status=no, menubar=yes, resizable=yes, scrollbars=yes');
}
 //套装管理
 function show_tz(){
	 window.open('index.php?r=taozhuang/img-index','width=800,height=600,toolbar=no, status=no, menubar=yes, resizable=yes, scrollbars=yes');

}
</script>
<body>
 <!--  
<div id="div_index">
 
 
 

    <div style="height:50px;" id="tzlist">
    		&nbsp; &nbsp; 选择套装ID: 
                <select  style="width:150px;">
         		<?php for($i=0;$i<count($tzlist);$i++):?>
         		 <option value="<?=$tzlist[$i]["sid"]?>"><?=$tzlist[$i]["sid"]?>:<?=$tzlist[$i]["name"]?></option>
         		<?php endfor;?>	
         		  </select>
    </div>  

    &nbsp; &nbsp; <span>输入过滤套装名 <input  style='width:150px;' type="text" id="tzname" /></span> 		
    <button onclick="search_tz();">确定</button>  

<br/><br/>
&nbsp; &nbsp;<button>编辑套装</button>&nbsp; &nbsp; <button>水平翻转</button>
</div> 
-->
<!-- 菜单 -->
<div id="div_menu"   >

<button class="menu_with" onclick="show_image_tree();">图片管理</button><br/><br/>
<button class="menu_with"  onclick="show_tz()">套装管理</button><br/><br/>
<button class="menu_with"  onclick="show_vr()">vr管理</button><br/><br/>
<button class="menu_with"  onclick="show_index()">秀家管理</button><br/><br/>
<button class="menu_with">DIY模板</button><br/><br/>
</div>

 
     
<!--操作图片按钮  -->
<div  id="div_image_tree" class="image_tree" style="display:none;border:red 1px solid;width:1500px;">
	<!-- 树状图 -->
	<div id="tree_left" style="width:300px;float:left;border:blue 1px solid;">
   
	</div>
	<!-- 树状图右边按钮  -->
	<div id="tree_right"  style="float:left;margin-left:30px;width:800px;">
        <!-- 刷新树按钮  --> 
        <div style="float:left;">
         <button>刷新树</button> <span>地址：images/newtaozhuang/</span> 
      
         </div>
             <!-- 操作图片开始 -->
            <div  style="margin-left:160px;float:left;">
            
                
              
    	
     
    </div>

            <div style='border:1px solid #ccc;'>
            
                 <!-- 图片菜单结束 -->		
                <button>查看</button><button>插入选中</button><button>添加新类型</button>
                <button>上传新图片</button><button>全部选中</button><button>删除选中图片</button><button>删除选中类别</button>
          			<!-- 分页 -->
        			<div id="pagecount"></div>
            	<div>
            		 <span style='text-align:right;'><?=Html::textInput('search_image','',['id'=>'search_value','style'=>'width:50%;margin-top:10px;','placeholder'=>'图片名称']) ?>
            	<?=Html::button('搜索图片',['onclick' => 'javascript:getData(1,$("#search_value").val(),"name")','class'=>'btn','style'=>'']) ?>
            	</span>
            	</div>
            	  
              <!-- 品牌过滤开始 -->
                <div   id="brand_list" style="clear:both;margin-left:20px;">
                 <br/> <br/>  根据单品品牌过滤:
                    
                    <select>
                    <?php for($i=0;$i<count($brandlist);$i++):?>
                    <option value="<?=$brandlist[$i]["id"]?>"><?=$brandlist[$i]["id"]?>:<?=$brandlist[$i]["name"]?></option>
                    <?php endfor;?> 
                    </select>
                    
                    <button>GO</button>
                </div>
            <!-- 品牌过滤end -->
            	 
            </div>
            
            <div id="list" style="text-align: center;">
            	<ul>
            	</ul>
            </div>

			

            
        
        <!-- 操作图片end -->
         <!-- 分页开始 -->
       
        <!-- 分页end -->
       
        </div>
    </div>
</div>
</body>
<style  type="text/css">
.tree {
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#fbfbfb;
    border:1px solid #999;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
    list-style-type:none;
    margin:0;
    padding:0px 5px 0px 5px;
    position:relative
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:1px 8px;
    text-decoration:none
}
.tree li.parent_li>span {
    cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}


<!--list的-->
#list{width:680px; height:530px; margin:2px auto; position:relative} 
#list ul li{display:inline-block;width:220px; height:260px; margin:2px} 
#list ul li img{width:220px; height:220px} 
#list ul li p{line-height:22px} 
#pagecount{width:500px; margin:10px auto; text-align:center;} 
#pagecount span{margin:4px; font-size:14px} 
#list ul li#loading{width:120px; height:32px; border:1px solid #d3d3d3; 
position:absolute; top:35%; left:42%; text-align:center; background:#f7f7f7
url(loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);} 


ul{list-style:none;}
</style>

 
<script>

$(function () {
	 getData(1,101000000,'type'); 
	 $("#pagecount span a").onclick=function(){
		 var rel = $(this).attr("rel"); 
		    if(rel){ 
		      getData(rel,img_type_click,img_tag); 
		    } 
     };
     $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
     $('.tree li.parent_li > span').onclick=function(e){
    	 var children = $(this).parent('li.parent_li').find(' > ul > li');
         var parent=$(this).parent('li.parent_li');
         console.log($(this));
         if (children.is(":visible")) {
             children.hide('fast');
             $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
         } else {
         	if(children.length==0){
         		var addr=$(this).data('addr');
         		var url = "index.php?r=image/upload-image&type_id=";
 	        	$.ajax({
 					url: 'index.php?r=image/child-tree',
 					type: 'get',
 					dataType: 'json',
 					data: {addr:addr},
 					success:function(res) {
 						console.log(res);
 						if(res.status==1){
 							for(var i=0;i<res.data.length;i++){
 					     		if(res.data[i].child=='true'){
 					     			var html="<ul><li class='parent_li'><input id='check_img("+res.data[i].id+")' onclick='check_img(this,"+res.data[i].id+")' type='checkbox' value='"+res.data[i].id+"'/><span data-addr="+res.data[i].addr+"><i class='icon-plus-sign'></i><a href='javascript:;' onclick='getData(1,"+res.data[i].id+")'> "+res.data[i].typename+"</a></span><br/><span style='display:none;cursor:pointer;' id='upload_img"+res.data[i].id+"' onclick='javascript:window.open('"+url+res.data[i].id+"','','width=800,height=600,toolbar=no, status=no, menubar=no, resizable=yes, scrollbars=yes')'>上传图片</span><li></ul>";
 					     				parent.append(html);
 					     		}else{
 					     			var html="<ul><li><input id='check_img("+res.data[i].id+")' onclick='check_img(this,"+res.data[i].id+")' type='checkbox' value='"+res.data[i].id+"'/><span><a href='javascript:;' onclick='getData(1,"+res.data[i].id+")'> "+res.data[i].typename+"</a></span><br/><span style='display:none;cursor:pointer;' id='upload_img"+res.data[i].id+"' onclick='javascript:window.open('"+url+res.data[i].id+"','','width=800,height=600,toolbar=no, status=no, menubar=no, resizable=yes, scrollbars=yes')'>上传图片</span><li></ul>";
 					     				parent.append(html);
 					     		}
 					     	}
 					     	children.show('fast');
             				$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
             				// bindtree();
 						}
 					},errror:function() {
 						console.log("error");
 					}
 				})
         	}else{
         		children.show('fast');
             	$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
         	}
         }
         e.stopPropagation();
     }
}); 
</script>